<template>
  <section class="myFootPrint">
    <goback :getName='goName' :getURL ="goType" :getBtn='goBtn'></goback>
      <dl class="goods_list">
        <dd v-for="(goodsList,index) in goodsList" :key="index" @click="seeSec(goodsList.id)">
          <div class="goods_img">
            <img :src="goodsList.simplImg" alt="产品图片">
          </div>
          <div class="goods_Sec">
            <p class="goods_title">
              {{goodsList.productName}}
            </p>
            <div class="price_cart">
              <span class="goods_price">
                {{goodsList.price/100 | currency}}
              </span>
              <div class="cart_channel">
                <div class="channel_Btn" v-if="false">
                  收益
                </div>
                <div class="goods_cart">
                  <img src="../../assets/mall/mallCart.png" alt="">
                </div>
              </div>
            </div>
          </div>
        </dd>
      </dl>
  </section>
</template>
<script>
import goback from '../../components/goback'
import { userInfoGet } from '../../libs/publicMethod'  // 获取用户信息
import { queryFindOrFoot } from '../../libs/interface'
  export default {
    components:{ queryFindOrFoot, goback, userInfoGet },
    data () {
      return{
        goodsList:[], // 产品列表
        offset: 0,
        goName: '足迹',
        goType: '', // 导航返回页面，如返回上一级则为空
        goBtn: '', // 导航右边菜单，如没有则不填
      }
    },
    mounted(){
      document.body.style.paddingBottom = 0
      let vm = this
      let params = {
        memberId: userInfoGet().id,
        type: 2,
      }
      queryFindOrFoot(params,(data)=>{       
        if (data.code == 1 && data.payload.length>0) {
          console.log(data.payload)
          vm.goodsList = data.payload.reverse()
        } else {
          vm.$toast('暂未请求到数据，请稍后再试')
        }
      })
    },
    methods:{
      // 跳转详情页
      seeSec (val) {
        sessionStorage.setItem('coupon', JSON.stringify({ coupon: false, isFund: false }))
        this.$router.push('/goods/'+val)
      },
    },
    filters: {
      currency: function (value) {
        if (!value) return ''
        return '￥' + value
      }
    }
  }
</script>
<style scoped>
.myFootPrint{
  background-color: white;
}
.myFootPrint ._title{
  padding: .5rem;
}
/* 商品列表 */
.goods_list{
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  flex-wrap: wrap;
  margin-top: .5rem;
  font-size: .75rem;
}
.goods_list dd{
  width: 47.5%;
  -moz-box-shadow: 0rem 3px 3px 0rem rgba(200,200,200,.5);
  -webkit-box-shadow: 0rem 3px 3px 0rem rgba(200,200,200,.5);
  box-shadow: 0rem 3px 3px 0rem rgba(200,200,200,.5);
  border-radius: .8rem;
  overflow: hidden;
  margin-left: 1.5%;
  margin-bottom: .5rem;
}
.goods_img{
  width: 100%;
  height: 8rem;
}
.goods_img img{
  width: 100%;
  height: 100%;
}
.goods_Sec{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  padding: .8rem;
}
.goods_title{
  font-size: .9rem;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.price_cart{  
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}
.goods_price{
  font-size: 1rem;
  color: red;
  width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.goods_cart{
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid rgba(231, 224, 255,.8);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: .3rem;
  box-sizing: border-box;
}
.cart_channel{  
  display: flex;
  flex-direction: row;  
  justify-content: space-around;
  align-items: center;
}
.channel_Btn{
  margin-right: .2rem;
  border: 1px solid #999;
  padding: .2rem .3rem;
  border-radius: 1rem;
  font-size: .6rem;
}
.goods_cart img{
  width: 80%;
}
</style>
